import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import hdcImage from '/static/img/system-hdc.png'
import Translate from '@docusaurus/Translate'

const progressValue = 30

export default function MobileHDC(): React.JSX.Element {
  return (
    <section className={clsx('hero shadow--lw', styles.heroBanner)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--5', styles.textCenter)}>
            <h1 className="hero__title">
              <Translate
                id="component.mobile.MobileHDC.title"
                description="the title of MobileHDC component">
                HDC
              </Translate>
            </h1>
            <p className={clsx('hero__subtitle', styles.subtext)}>
              <Translate
                id="component.mobile.MobileHDC.subtitle"
                description="the subtitle of MobileHDC component">
                PolyOS Mobile facilitates interaction between Host and
                Guest through HDC (OpenHarmony Device Connector),
                enabling actions such as issuing commands,
                transferring files, installing/uninstalling software,
                and viewing logs.
              </Translate>
            </p>
          </div>
          <div
            className={clsx('col col--1', styles.textCenter)}></div>
          <div className={clsx('col col--6', styles.center)}>
            <img
              src={hdcImage}
              className={styles.screenshot}
              alt="Screenshot"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
